class Banner{
    constructor(){
        this.child = document.querySelectorAll(".imgbox a");
        this.list = document.querySelector(".banList");
        this.box = document.querySelector(".banner");

        this.iNow = 0;
        this.iPrev = this.child.length - 1;
    }
    init(){
        var that = this;
        this.list.onclick = function(eve){
            var e = eve || window.event;
            var tar = e.target || e.srcElement;
            if(tar.tagName == "SPAN"){
                that.listChangeIndex(tar);
            }
        }
    }
    changeIndex(direct){
        if(direct == 1){
            if(this.iNow == 0){
                this.iNow = this.child.length-1;
                this.iPrev = 0;
            }else{
                this.iNow--;
                this.iPrev = this.iNow + 1;
            }
        }else{
            if(this.iNow == this.child.length-1){
                this.iNow = 0;
                this.iPrev = this.child.length-1;
            }else{
                this.iNow++;
                this.iPrev = this.iNow - 1;
            }
        }
        this.move(direct);
    }
    move(direct){
        this.child[this.iPrev].style.left = 0;
        move(this.child[this.iPrev],{left:this.child[0].offsetWidth * direct});
        this.child[this.iNow].style.left = -this.child[0].offsetWidth * direct + "px";
        move(this.child[this.iNow],{left:0});

        this.setActive();
    }
    createList(){
        var str = ``;
        for(var i=0;i<this.child.length;i++){
            str += `<span index='${i}'></span>`;
        }
        this.list.innerHTML = str;

        this.setActive();
    }
    setActive(){
        for(var i=0;i<this.list.children.length;i++){
            this.list.children[i].className = "";
        }
        this.list.children[this.iNow].className = "active";
    }
    listChangeIndex(tar){
        var index = parseInt(tar.getAttribute("index"));
        if(index > this.iNow){
            this.listMove(1,index);
        }
        if(index < this.iNow){
            this.listMove(-1,index);
        }
        this.iNow = index;

        this.setActive();
    }
    listMove(direct,index){
        this.child[this.iNow].style.left = 0;
        move(this.child[this.iNow],{left:-(this.box.clientWidth) * direct})
        this.child[index].style.left = this.box.clientWidth * direct + "px";
        move(this.child[index],{left:0});
    }
    autoPlay(){
        var t = setInterval(()=>{
            this.changeIndex(-1);
        },3000)
    }
}

var b = new Banner();
b.init();
b.createList();
b.autoPlay();

function move(ele,obj){
    clearInterval(ele.t);
    ele.t = setInterval(()=>{
        for(var attr in obj){
            if(attr == "opacity"){
                var iNOw = getStyle(ele,attr)*100;
            }else{
                var iNOw = parseInt(getStyle(ele,attr));
            }
            let speed = (obj[attr] - iNOw)/10;
            speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
            if(attr == "opacity"){
                ele.style.opacity = (iNOw + speed)/100;
            }else{
                ele.style[attr] = iNOw + speed + "px";
            }
        }
    },30);
}

function getStyle(ele,attr){
    if(ele.currentStyle){
        return ele.currentStyle[attr];
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}
